<template>
	<view class="pay-money">
		<wd-navbar title="我的合同" left-arrow @click-left="handleClickLeft"></wd-navbar>
		<view class="pay-money-content">
			<view class="pay-money-container">
				<view class="pay-money-top">
					<wd-drop-menu>
						<wd-drop-menu-item icon="caret-down-small" icon-size="28px" v-model="value" :options="option"
							@change="handleChange" />
					</wd-drop-menu>
					<view class="pay-money-image flex flex-center">
						<image
							:src="selectData.accountCode || 'https://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/CRM/%E5%AE%B9%E5%99%A8%402x%20(1).png'">
						</image>

					</view>
					<view class="pay-money-info">
						<view class="flex flex-between mb40">
							<view class="label">账号</view>
							<view>{{selectData.account}}</view>
						</view>
						<view class="flex flex-between mb40">
							<view class="label">户名</view>
							<view>{{selectData.accountName}}</view>
						</view>
						<view class="flex flex-between mb32">
							<view class="label">备注</view>
							<view>{{selectData.remark}}</view>
						</view>
					</view>
				</view>
				<view class="pay-money-footer flex flex-evenly">
					<view class="flex flex-center" @click="onCopy"><img
							src="https://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/CRM/%E5%A4%8D%E5%88%B6%E5%AD%90%E7%BA%A7-e621ac9c4094f54da35ad6323cd6dabb04a8.png" />收款账号
					</view>
					<view class="line" v-if="selectData.accountCode!==null"></view>
					<view class="flex flex-center" v-if="selectData.accountCode!==null" @click="onSave"><img
							src="https://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/CRM/%E5%AE%B9%E5%99%A8%402x%20(2).png" />收款码
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		getAccountList
	} from "@/api/contract";
	const selectData = ref({
		accountCode: ''
	})
	const value = ref(0)
	const option = ref([])
	const handleClickLeft = () => {
		uni.navigateBack()
	}
	const getAccount = async () => {
		const {
			data
		} = await getAccountList()
		option.value = data.map((item, index) => {
			return {
				label: item.account,
				value: index,
				accountCode: item.accountCode,
				account: item.account,
				accountName: item.accountName,
				remark: item.remark
			}
		})
		console.log(option.value);
		selectData.value = option.value[0]
	}
	const handleChange = (e) => {
		selectData.value = e.selectedItem
	}
	const onCopy = () => {
		uni.setClipboardData({
			data: selectData.value.account,
			success: function() {
				uni.showToast({
					title: '复制成功',
					icon: 'success',
					duration: 2000
				});
			}
		});
	}
	const onSave = () => {
		uni.authorize({
			scope: 'scope.writePhotosAlbum',
			success: () => {
				// 已经获取到了权限，可以进行保存操作
				uni.downloadFile({
					url: selectData.value.accountCode ||
						'https://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/CRM/%E5%AE%B9%E5%99%A8%402x%20(1).png',
					success: (res) => {
						console.log(res);
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => uni.showToast({
									title: '保存成功',
									icon: 'success'
								}),
								fail: () => uni.showToast({
									title: '保存失败',
									icon: 'none'
								})
							});
						} else {
							uni.showToast({
								title: '下载失败',
								icon: 'none'
							});
						}
					},
					fail: () => uni.showToast({
						title: '下载失败',
						icon: 'none'
					})
				});
			},
			fail: () => {
				uni.showToast({
					title: '请开启保存到相册权限',
					icon: 'none'
				});
			}
		});

	}
	getAccount()
</script>
<style scoped lang="scss">
	.pay-money {
		background: #007DFF;
		height: 100vh;

		:deep(.wd-navbar) {
			padding-top: 88rpx;
			background: transparent;

			.wd-navbar__title {
				font-size: 36rpx;
				color: #FFFFFF;
			}

			.wd-navbar__arrow {
				width: 36rpx;
				color: #FFFFFF;
			}
		}

		:deep(.wd-navbar::after) {
			background: transparent !important;
		}

		&-content {
			padding: 80rpx 34rpx 0;
		}

		&-container {
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(134, 144, 156, 0.1);
			border-radius: 20rpx;
			overflow: hidden;

			:deep(.wd-popup) {
				width: calc(100% - 68rpx);
				left: 34rpx;
			}
		}

		&-image {
			padding: 48rpx;
			margin-bottom: 32rpx;
			border-bottom: 2rpx solid #E2E8F0;

			image {
				width: 404rpx;
				height: 404rpx;
			}
		}

		&-top {
			padding: 0 32rpx 0;
		}

		&-info {
			font-size: 28rpx;
			color: #3D3D3D;

			.label {
				color: #86909C;
			}
		}

		&-footer {
			border-top: 2rpx solid #E2E8F0;
			padding: 40rpx 0;
			font-size: 32rpx;
			color: #007DFF;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}

			.line {
				width: 8rpx;
				height: 50rpx;
				background: #E1E6ED;
				border-radius: 4rpx;
			}
		}
	}
</style>